﻿
<script src="~/Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.appendRow.js"></script>

<div class="easyui-panel" data-options="fit:true,border:false,title:'测试列表'">
    <table id="dg1"></table>
</div>

<script>
    $(function () {
        var getFrozenColumns = function () {
            var result = [];

            var c1 = [];
            c1.push({ field: 'ID', title: '主键', width: 100 });
            c1.push({ field: 'AreaName', title: '地区', width: 150 });
            c1.push({ field: 'Sex1', title: '男', width: 90 });
            c1.push({ field: 'Sex2', title: '女', width: 90 });

            result.push(c1);

            return result;
        };

        var getColumns = function () {
            var result = [];

            var normal00000 = [
                { field: 'TS1', title: '测试1', width: 60 },
                { field: 'TS2', title: '测试2', width: 60 }
            ];
            result.push(normal00000);

            return result;
        };
        var options = {
            title: "列表",
            idField: "ID",
            rownumbers: true,
            fit: true,
            border: false,
            singleSelect: true,
            toolbar: [
                {
                    iconCls: 'icon-add',
                    text: "追加1个数据行",
                    handler: function () {
                        $("#dg1").datagrid("appendRow", {
                            ID: $.util.guid("N"), AreaName: "大西北1", Sex1: 44, Sex2: 51, TS1: "T4", TS2: "T88"
                        });
                    }
                },
                "-",
                {
                    iconCls: 'icon-add',
                    text: "追加多个数据行",
                    handler: function () {
                        $("#dg1").datagrid("appendRows", [
                            { ID: $.util.guid("N"), AreaName: "大西北2", Sex1: 44, Sex2: 51, TS1: "T4", TS2: "T88" },
                            { ID: $.util.guid("N"), AreaName: "大西北3", Sex1: 44, Sex2: 51, TS1: "T4", TS2: "T88" }
                        ]);
                    }
                },
                "-",
                {
                    iconCls: 'icon-add',
                    text: "尝试追加1个数据行",
                    handler: function () {
                        $("#dg1").datagrid("appendRow", {
                            ID: $.util.guid("N"), AreaName: "大西北", Sex1: 44, Sex2: 51, TS1: "T4", TS2: "T88"
                        });
                    }
                },
                "-",
                {
                    iconCls: 'icon-add',
                    text: "尝试追加多个数据行",
                    handler: function () {
                        $("#dg1").datagrid("appendRows", [
                            { ID: $.util.guid("N"), AreaName: "大西北7", Sex1: 44, Sex2: 51, TS1: "T4", TS2: "T88" },
                            { ID: $.util.guid("N"), AreaName: "大西北", Sex1: 44, Sex2: 51, TS1: "T4", TS2: "T88" },
                            { ID: $.util.guid("N"), AreaName: "大西北9", Sex1: 44, Sex2: 51, TS1: "T4", TS2: "T88" }
                        ]);
                    }
                }
            ],
            frozenColumns: getFrozenColumns(),
            columns: getColumns(),
            method: "get",
            url: "/Jsons/datagrid/datagrid-common-data.json",
            onBeforeAppendRow: function (row) {
                if (row["AreaName"] == "大西北") {
                    console.log("追加失败。因为[大西北]不添加。");
                    return false;
                }
            },
            onAppendRow: function (row) { console.log("追加数据[id = "+ row.ID +"]成功。"); }
        };

        $("#dg1").datagrid(options);
    });
</script>